<template>
  <div class style="height: 100%;padding: 20px;">
    <div :id="uniqueID" style="height: 100%; margin-top: 1%;" />
  </div>
</template>

<script>
import echarts from 'echarts'
import uuidv1 from 'uuid/v1'

import defaultmixins from '@/mixins/bigScreen/defaultmixins'
export default {
  name: 'NengliuProduct',
  mixins: [defaultmixins],
  created() {
    this.uniqueID = uuidv1()
    this.uniqueID2 = uuidv1()
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.uniqueID))
    var scale = this.$root.setting.scale
    var option = {
      tooltip: null,
      series: {
        type: 'sankey',
        layout: 'none',
        focusNodeAdjacency: 'allEdges',
        label: {
          normal: {
            fontSize: 24 * scale,
            color: '#A0C8DB'
          }
        },
        lineStyle: {
          borderColor: '#ddd',
          borderWidth: 1,
          color: 'source'
        },
        data: [{
          name: '燃烧',
          itemStyle: {
            color: '#39CDA1',
            borderColor: '#39CDA1'
          },
          textStyle: {
            color: '#ffffff'
          },
          value: 15
        }, {
          name: '购电',
          itemStyle: {
            color: '#18A2E2',
            borderColor: '#18A2E2'
          }

        }, {
          itemStyle: { color: '#39CDA1',
            borderColor: '#39CDA1' },
          name: 'CHP'
        }, {
          itemStyle: { color: '#ECAE33',
            borderColor: '#ECAE33' },
          name: '电力总线'
        }, {
          itemStyle: { color: '#E4E26A',
            borderColor: '#E4E26A' },
          name: '蒸汽总线'
        }, {
          itemStyle: { color: '#4FC7FF',
            borderColor: '#4FC7FF' },
          name: '密炼'
        }, {
          itemStyle: { color: '#4FC7FF',
            borderColor: '#4FC7FF' },
          name: '其他'
        }, {
          itemStyle: { color: '#18A2E2',
            borderColor: '#18A2E2' },
          name: '三厂'
        }, {
          itemStyle: { color: '#137FD3',
            borderColor: '#137FD3' },
          name: '废弃'
        }, {
          itemStyle: { color: '#1484DC',
            borderColor: '#1484DC' },
          name: '四厂'
        }, {
          itemStyle: { color: '#18A2E2',
            borderColor: '#18A2E2' },
          name: '六厂'
        }, {
          itemStyle: { color: '#137FD3',
            borderColor: '#137FD3' },
          name: '五厂'
        }, {
          itemStyle: { color: '#137FD3',
            borderColor: '#137FD3' },
          name: '二厂'
        }],
        links: [{
          source: '燃烧',
          target: 'CHP',
          value: 20
        }, {
          source: '购电',
          target: 'CHP',
          value: 3
        }, {
          source: 'CHP',
          target: '电力总线',
          value: 18
        }, {
          source: 'CHP',
          target: '蒸汽总线',
          value: 8
        }, {
          source: '电力总线',
          target: '密炼',
          value: 4
        }, {
          source: '电力总线',
          target: '其他',
          value: 2
        }, {
          source: '电力总线',
          target: '三厂',
          value: 2
        }, {
          source: '电力总线',
          target: '废弃',
          value: 2
        }, {
          source: '电力总线',
          target: '四厂',
          value: 2
        }, {
          source: '蒸汽总线',
          target: '其他',
          value: 2
        }, {
          source: '蒸汽总线',
          target: '三厂',
          value: 2
        }, {
          source: '蒸汽总线',
          target: '废弃',
          value: 2
        }, {
          source: '蒸汽总线',
          target: '四厂',
          value: 2
        }, {
          source: '蒸汽总线',
          target: '六厂',
          value: 2
        }, {
          source: '蒸汽总线',
          target: '五厂',
          value: 2
        }, {
          source: '蒸汽总线',
          target: '二厂',
          value: 2
        }]
      }
    }
    myChart.setOption(option)
    window.addEventListener('resize', () => {
      myChart.resize()
    })
  }
}
</script>

<style scoped>

</style>
